<template>
  <div class="edit-down-table">
    <vxe-pulldown class="edit-down-pulldown" ref="xDown" transfer>
      <template>
        <vxe-input class="edit-down-input" v-model="row[column.property]" type="search" placeholder="搜索"  @keyup="keyupEvent" @click="clickEvent" @focus="focusEvent" @suffix-click="suffixClick"></vxe-input>
      </template>
      <template v-slot:dropdown>
        <div class="edit-down-wrapper">
          <vxe-grid stripe  header-align="center" highlight-hover-row highlight-current-row auto-resize
                    highlight-current-column highlight-hover-column

                    height="auto" ref="grid" row-id="id" :loading="loading" :pager-config="tablePage" :data="gridData" :columns="tableColumn" @cell-click="selectEvent" @page-change="pageChangeEvent"
                    export-config
                    :toolbar="tableToolbar"
          >
            <template v-slot:tools>
              <button style="margin-right: .8em;" @click="btnClick('close')" type="button" class="vxe-button type--button is--circle" title="关闭下拉表格"><i class="vxe-modal--close-btn trigger--btn vxe-icon--close"></i></button>
            </template>
          </vxe-grid>
        </div>
      </template>
    </vxe-pulldown>
  </div>
</template>

<script>
/*eslint-disable */
import props from "../xform/props";

export default {
    name: 'FortenGrid',
    props: {
      params: Object,
      renderOpts: Object
    },
    data() {
      return {
        row: null,
        column: null,
        loading: false,
        queryUrl: '',
        filterData: [], //筛选后数据
        tableData: [], //最原始数据
        gridData: [], //显示数据
        tableColumn: [{
          type: 'seq',
          width: 40
        }
        ],
        tablePage: {
          total: 0,
          currentPage: 1,
          pageSize: 20
        },
        tableToolbar: {
          export: true,
          custom: true
        }
      }
    },
    watch: {
      params() {
        /*eslint-disable*/
        this.load()
      }
    },
    created() {
      /*eslint-disable*/
      this.load()
    },
    methods: {
      async load() {
        const {
          row,
          column
        } = this.params //行、列数据
        /*eslint-disable*/
        this.row = row
        this.column = column
        const {
          props = {}
        } = this.renderOpts
        props.dataview.$emit('getGridData', {row, column})
        this.tableData = props.tableData && props.tableData[column.property]
        this.tableColumn = (props.tableColumns && props.tableColumns[column.property]) || this.tableColumn
        if (!this.tableData || !this.tableData.length) { //如果没有传入数据，自己去获取
          return
        }
        this.filterData = this.tableData
        this.tablePage.total = this.tableData ? this.tableData.length : 0
        this.pageChangeEvent(this.tablePage)
      },
      focusEvent() {
        setTimeout(() =>{
          // this.renderOpts.props.dataView.$emit('input-focus')
        },1000)
        this.$refs.xDown.showPanel()
      },
      clickEvent() {
        /*eslint-disable*/
        this.load()
        this.$refs.xDown.showPanel()
      },
      keyupEvent({
                   $event
                 }) { // 根据输入筛选
        $event.stopPropagation()
        this.$refs.xDown.showPanel()
        const {
          row,
          column
        } = this
        const {
          keyCode
        } = $event
        const cellValue = row[column.property]

        let {
          grid
        } = this.$refs
        let selectedRow = grid.getCurrentRecord()
        let rowIndex = grid.getRowIndex(selectedRow)
        if (keyCode == 38) {
          if (rowIndex <= grid.data.length) {
            grid.setCurrentRow(grid.getData(rowIndex - 1))
            grid.scrollToRow(grid.getData(rowIndex - 1))
          }
        } else if (keyCode == 40) {
          if (rowIndex >= -1) {
            grid.setCurrentRow(grid.getData(rowIndex + 1))
            grid.scrollToRow(grid.getData(rowIndex + 1))
          }
        } else if (keyCode == 13) {
          let params = {
            row: selectedRow
          }
          this.selectEvent(params)
        } else {
          let that = this
          if (cellValue) {
            this.filterData = this.tableData.filter(item => {
              let find = false
              that.tableColumn.filter(column => column.search).map(col => {
                if (item[col.field] && item[col.field].toString().indexOf(cellValue) > -1) {
                  find = true
                  return find
                }
              })
              return find
            })
          } else {
            this.filterData = this.tableData
          }
          this.tablePage.total = this.filterData ? this.filterData.length : 0
          this.pageChangeEvent(this.tablePage)
          if (this.gridData) {
            this.$refs.grid.setCurrentRow(this.gridData[0])
          }
        }
      },
      suffixClick() {
        this.$refs.xDown.togglePanel()
      },
      pageChangeEvent({
                        currentPage,
                        pageSize
                      }) {
        this.tablePage.currentPage = currentPage
        this.tablePage.pageSize = pageSize
        this.gridData = this.filterData ? this.filterData.filter((row, index) => index >= (this.tablePage.currentPage - 1) * this.tablePage.pageSize && index < this.tablePage.currentPage * this.tablePage.pageSize) : []
      },
      selectEvent(params) { //选择耗材事件，选择后调用适用房的matrChangeEvent方法来解决
        const {
          renderOpts,
          row,
          column
        } = this
        const {
          props = {}
        } = renderOpts
        this.$set(column, 'selectRow', params.row)
        // props.dataview.$emit('matrChangeEvent', row, params.row)
        props.dataview.$emit('select-change', {
          row,
          column
        })
        this.$refs.xDown.hidePanel()
      },
      //按钮点击事件
      btnClick(key){
        if(key == 'close') this.$refs.xDown.hidePanel()
      }
    }
  }
</script>

<style lang="scss">
  .vxe-pulldown--panel {
    z-index: 10000 !important;
  }

  .edit-down-pulldown {
    width: 100%;
  }

  .edit-down-wrapper {
    width: 65vw !important;
    height: 500px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  }
</style>
